<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">


</head>
<body>
    <div id="app">
       <button @click="changeGood">变好</button>
       <button @click="changeBad">变坏</button>
        {{heart}}
        {{wait}}
    </div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm =  new Vue({
        el: '#app',
        data:{
            heart:'爱心',
            wait:''

        },
        watch:{
            heart(newVal,oldVal){
                this.wait = '正在变心中....';
                setTimeout(()=>{
                    this.wait = '变心完成!';
                },2000)
            }
        },
        methods:{
            changeGood(){
                this.heart = '变好';

            },
            changeBad(){
                this.heart = '变坏';
            }
        }
    })


</script>
</html>